<template>
  <div class="rich_content indexBG">
    <van-search
      :value="searchKeyWorlds"
      placeholder="请输入搜索关键词"
      focus
      background="#f368a1"
      @search="onSearch"
      @cancel="onCancel"
    ></van-search>
    <div class="searchLists"  v-if="tabContents.length > 0">
      <Card v-for="(item,k) in tabContents" :key="k" :content="item.desc" :item-id="item.id" :item-bg="item.xclass"></Card>
    </div>
  </div>
</template>

<script>

import {API} from "../../api";
import {hideLoading, showLoading} from "../../api/wechat";
import {showToast} from "../../utils";
import Card from "../../components/Card";

export default {
  data () {
    return {
      autoHeight:"height:100%;",
      searchKeyWorlds:"",
      page:1,
      pageRandom:0,
      tabContents:[]
    }
  },
  watch:{
    pageRandom:{
      handler:function(val,oldVal){
        return val;
      },
      deep:true
    }
  },

  components: {
    Card
  },
  mounted() {
    let _this = this;
  },
  onPullDownRefresh () {
    wx.stopPullDownRefresh();
  },
  onReachBottom () {
    let _this = this;
    _this.getData();
  },

  methods: {
    onSearch(e){
      let _this = this;
      _this.page = 1;
      _this.pageRandom = 0;
      _this.tabContents = [];
      _this.searchKeyWorlds = e.mp.detail;
      if(_this.searchKeyWorlds.trim() == ""){ return;}
      _this.getData();
    },
    getData(){
      let _this = this;
      showLoading({title:"加载中"});
      API.getSearch({wd:_this.searchKeyWorlds,page:_this.page}).then( res => {
        hideLoading();
        if(res.code == 200){
          if(res.data.length > 0){
            let data = res.data;
            if(_this.tabContents == undefined){
              _this.tabContents = data;
            } else {
              _this.tabContents.push(...data);
            }
            _this.autoHeight = "height:auto;";
            _this.pageRandom =  Math.random();
            _this.page++;
          } else {
            showToast("暂无更多数据");
          }

        }

      });
    },
    onCancel(e){
      console.log(e);
      console.log('onCancel');
    }

  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .indexBG{
    background-color: #f0f0f0;
  }
  .card-list-item{
    background-color: #fff;
    width: 90%;
    margin: 20px auto;
    border-radius: 5px;
    padding: 10px;
  }
  .card-list-item .title{
    font-size: 17px;
    text-align: center;
  }
  .card-list-item .collect{
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 5px 0px 10px 0px;
  }
  .card-list-item .image{
    width: 100%;
    height: 150px;
  }
  .card-list-item .image .img{
    width: 100%;
    height: 100%;
  }

</style>
